﻿<template>
  <div class="activity_container">
    <header>
       <img src="../../static/img/goback_header_left_act.png"
            class="img_header" v-on:click="goback"/>
        {{menu_list.title}}
       <!--<div class="my_match">
         我的参赛
       </div>-->
    </header>
    <!-- write div s -->
    <div class="write_div">


    </div>
    <!-- write div e -->
    <!-- banner s -->
    <div class="act_banner">
      <img v-bind:src="menu_list.cover|img_show_base"/>
      <div class="act_banner_bot">
           <div>截至：{{menu_list.abortTime|format_date}}</div>
           <div>参赛者：289/600</div>
      </div>
    </div>
    <!-- banner e -->
    <!-- candidates s -->
    <div class="candidates">
      <div class="candidates_title">
        晋级者
      </div>

      <div class="candidates_box_wrapper">
        <div class="candidates_box">
          <scroll :card_mess="card_mess" v-if="show_card_mess" @scroll_a="listenChildMsg"></scroll>
        </div>
      </div>

    </div>

    <!-- candidates e -->
    <!-- user_info s -->
    <!-- bottom_list -->
    <div class="user_info">
      <!-- user_info box s 官方-->
      <div class="user_info_music" style="display:none">
        <div class="user_info_user_name">
          <p>官方</p>
          <p style="margin-top:0.1rem;">转播</p>
        </div>
        <div class="play_music">

        </div>
        <div class="dianzan_activity">
          <img src="../../static/img/rank_heart.png" class="rank_heart_img">
          <p>12345</p>
        </div>
        <div class="user_info_line">

        </div>
        <img src="../../static/img/more.png" class="more" v-on:click="Letter_box()"/>
      </div>
      <!-- user_info box e 官方-->
      <!-- user_info box s 用户 -->
      <div class="user_info_music" style="background-color:#9f5c2f;display:none" >
        <div class="user_info_user_name">
          <p style="transform:translateY(50%)">匿名</p>
        </div>
        <!-- -->
        <div class="play_music" >
        </div>
        <div class="dianzan_activity">
          <img src="../../static/img/rank_heart.png" class="rank_heart_img">
          <p>12345</p>
        </div>
        <div class="user_info_line">
        </div>
        <img src="../../static/img/more.png" class="more" />
      </div>
      <!-- user_info box e 用户 -->

      <!-- user_info box img s -->
      <div class="user_info_img box_shadow" style="background-color:#9f5c2f" v-for="bottom_list in bottom_list">
        <div class="user_info_user_name">
          <p>{{bottom_list.enroller.userName}}</p>
        </div>

        <div class="wrap_info_user_img" style="position:relative;">
          <!-- music play s -->
          <div class="play_music" v-on:click="play_music(bottom_list.voice)" >
          </div>
          <!-- music play e -->
          <!-- wrap_img s -->
          <div class="wrap_img" style="position:relative;">
            <!--<img v-bind:src="bottom_list.enroller.image|img_show_base" class="user_info_img" style="width:66vw;height:6rem;" />-->
            <img v-bind:src="bottom_list.picture|img_show_base" class="user_info_img" style="width:66vw;height:6rem;overflow:hidden;" />

            <!-- 点赞s -->
            <div class="dianzan_activity" style="position:absolute;top:0;right:0;" v-on:click="dianzan_activity(bottom_list.id)">
              <img src="../../static/img/rank_heart.png" class="rank_heart_img"
                   style="display:inline;vertical-align:top;">
              <span style="vertical-align:middle;margin-right:2vw;margin-left:2vw;">{{bottom_list.love}}</span>
            </div>
            <!-- 点赞e -->

          </div>
          <!-- wrap_img e -->


        </div>
        <div class="user_info_line">&nbsp;</div>
        <img src="../../static/img/more.png" class="more" v-on:click="Letter_box(bottom_list.id)"/>
      </div>
      <!-- user_info box img e -->

    </div>

    <!-- user_info e -->
    <!-- user_info bottom write_box s -->
     <div class="user_info_bottom_write_box">
       &nbsp; &nbsp; &nbsp; &nbsp;
     </div>
    <!-- user_info bottom write_box e -->
    <!-- bottom height s -->
    <div class="bottom_height" style="width:100%;height:1rem;">&nbsp;&nbsp;</div>
    <!-- bottom height e -->
    <div class="bottom_btn_wrap">
      <!--<div class="bottom_btn_share bottom_base_btn">
        分享
      </div>-->
      <!--<div class="bottom_btn_pinglun bottom_base_btn" v-on:click="pinglunshow">-->
        <!--评论-->
      <!--</div>-->
      <!--<div class="bottom_btn_bm bottom_base_btn" v-on:click="baom_btn">-->
        <!--报名-->
      <!--</div>-->
      <!--<div class="bottom_now bottom_base_btn">
        现场转播
      </div>-->
    </div>
    <!-- 语言播放s -->
    <audio v-bind:src="music_src" ref="audio">

    </audio>
    <!-- 语音播放e -->

    <!-- 报名s -->
    <div class="wrapper_baom" v-show="wrap_b_show">
      <div class="baom clearfix">
        <img src="../../static/img/smile.jpg" class="smile">
        <div class="close_baom" v-on:click="close_x">X</div>
        <div class="baom_header">
          报名成功!
        </div>
        <div class="baom_mid_header">
          （可以在“我的活动”里查看）
        </div>
        <div class="baom_bot_header">
          请根据比赛或者活动主题上传
          你的作品表达你的想法！
        </div>
        <!--<div class="add_img_btn">
          <img src="../../static/img/rank_add_img.png" class="add_img_btn_1_img" />
          <p class="add_img_w">添加图片/视频</p>
        </div>
        <div class="add_img_btn">
          <img src="../../static/img/rank_add_img.png" class="add_img_btn_1_img" />
          <p class="add_img_w">添加语音</p>
        </div>-->

        <img src="../../static/img/act_add_img.png" alt="Alternate Text"class="add_btn" v-on:click="add_btn"/>
        <img src="../../static/img/add_voice.png" alt="Alternate Text" class="add_btn"  v-on:click="add_btn"/>
        <img src="../../static/img/add_word.png" alt="Alternate Text" class="add_btn"  v-on:click="add_btn"/>
        <img src="../../static/img/add_detail_mes.png" alt="Alternate Text" class="add_btn"  v-on:click="add_btn"/>
        <div class="baom_bottom_s">
          赶紧和小伙伴一起参加吧!<img src="../../static/img/ad_share_icon.png" class="icon_img"/>
        </div>
      </div>
    </div>
    <!-- 报名e -->
   <!-- act 评论提交 s-->

    <div class="commit_on_put" v-show="commit_show" v-on:click.self="commit_show_fun">
      <div class="commit_box">
          <textarea class="commit_input clearfix" placeholder="输入评论" ref="commit_p">

          </textarea>
          <div class="commit_btn" v-on:click.self="commit_up_load">
            提交
          </div>
      </div>
    </div>

    <!-- act 评论提交 e-->

    <!--活动预测s  -->
    <div class="act_forecast" v-if="act_forecast_show">
      <div class="act_for_box" style="position:relative">
          <div class="act_header" style="position:relative">

            <!-- close btn s -->
            <div class="act_close_btn" v-on:click="act_close_btn_f">
              x
            </div>
            <!-- close btn e -->

            <span class="act_header_num" style="padding-right:4vw;">{{poll_list.id}}号</span>{{poll_list.userName}}
            <img v-bind:src="poll_list.image|img_show_base" style="width:11vw;height:11vw;overflow:hidden;" class="act_header_img"/>
            <!-- letter s -->
            <img class="act_letter" src="../../static/img/letter_l.jpg" />

            <!-- letter e -->
          </div>
          <img v-bind:src="poll_list.cover|img_show_base" class="act_main_img">
          <div class="mid_box" style="display:flex;">
            <div class="mid_box_line" style="font-size:4vw;color:#9f5c2f;">
              播放
            </div>
            <img src="../../static/img/music_player_icon.png" style="width:8.8vw;height:5.3vw;margin-left:1.6vw;margin-top:0.2vw;"/>
          </div>
        <div class="acat_bottom" style="display:flex;">
          <div class="act_bot_w">
            关注预测
          </div>
          <div class="act_bot_box" v-on:click="vote_f(poll_list.id)">
            <p class="act_bot_num">{{poll_list.numbers[0]}}</p>
            <div class="act_b">

            </div>
            <div class="act_name">冠军</div>
          </div>

          <div class="act_bot_box" v-on:click="vote_f(poll_list.id)">
            <p class="act_bot_num">{{poll_list.numbers[1]}}</p>
            <div class="act_b">
            </div>
            <div class="act_name">亚军</div>
          </div>

          <div class="act_bot_box" v-on:click="vote_f(poll_list.id)">
            <p class="act_bot_num">{{poll_list.numbers[2]}}</p>
            <div class="act_b">
            </div>
            <div class="act_name">季军</div>
          </div>

          <div class="act_bot_box" v-on:click="vote_f(poll_list.id)">
            <p class="act_bot_num">{{poll_list.numbers[3]}}</p>
            <div class="act_b">
            </div>
            <div class="act_name">殿军</div>
          </div>

          <div class="act_bot_box" v-on:click="vote_f(poll_list.id)">
            <p class="act_bot_num">{{poll_list.numbers[4]}}</p>
            <div class="act_b">
            </div>
            <div class="act_name">其他</div>
          </div>

        </div>
      </div>
    </div>
    <!-- 活动预测e -->

  </div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  import { Toast, Indicator } from 'mint-ui';
  import "../filter/filter.js";
  import scroll from "./nav_gift_scrol.vue";
  import common from "../common/common.js";
  import Vue from 'vue'
  import VueAwesomeSwiper from 'vue-awesome-swiper'

  Vue.use(VueAwesomeSwiper)
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      menu_list: "",
      Enroller: "",
      card_mess: "",
      show_card_mess: false,
      bottom_list: "",
      music_src: "",//音乐播放
      play_music_flag: false,
      wrap_b_show: false,
      commit_show: false,
      act_forecast_show: false,
      poll_list:""
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {
    this.$nextTick( ()=> {
      let app = document.getElementById("app");
      app.style.backgroundColor = "#eeeeee";
    })
    let rank_id = sessionStorage.getItem("rank_id");
    Indicator.open();
    //获取产赛用户数量
    let base_url = common.get_base_url();
    ///api/user / activity / getCount
    this.$http.get(base_url+'/yizhiweimen/api/user/activity/getCount?actionId=' + rank_id,
      qs.stringify(
        {
          "actionId": rank_id
        })
    )
      .catch((thrown) => {
        console.log(thrown);

      }).then((e) => {
        console.log("actionId")
        console.log(e.data)
      })

    this.$http.get(base_url+'/yizhiweimen/api/user/activity/getActivityById?id=' + rank_id,
      qs.stringify(
        {
          "id": rank_id
        })
      )
      .catch((thrown) => {
        console.log(thrown);

      }).then((e) => {
        console.log(e)
        this.menu_list = e.data;
      })

    //晋级者数据获取

    this.$http.get(base_url+'/yizhiweimen/api/user/activity/getEnrollerByActionId?actionId=' + rank_id,
      qs.stringify(
        {
          "actionId": rank_id
        })
      )
      .catch((thrown) => {
        console.log(thrown);
      }).then((e) => {
        console.log(e.data);
        this.card_mess = e.data;
        this.$nextTick(() => {
          console.log("tick___________")
          this.show_card_mess = true;
        })
      })


    //参赛人
    /// api / user / activity / getEnrollactiveById
    this.$http.get(base_url+'/yizhiweimen/api/user/activity/getEnrollInfoByactionId?actionId=' + rank_id + "&pageNo=" + 1 +"&pageSize="+10,
      qs.stringify(
        {
          "id": rank_id
        })
      )
      .catch((thrown) => {
        Indicator.close();
        console.log(thrown);
      }).then((e) => {
        Indicator.close();
        this.bottom_list = e.data;
      })

  },
  methods: {
    //投票
    vote_f: function (id) {
      let base_url = common.get_base_url();
      ///api/user / activity / Vote
      let user_id = common.get_user_id();
      Indicator.open();
      this.$http.post(base_url + "/yizhiweimen/api/user/activity/Vote",
        qs.stringify(
          {
            "voteId": id,
            "uid":user_id
          })
      )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          console.log("user_act_sssssss");
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          this.act_forecast_show = false;

        })
    },
    act_close_btn_f: function () {
      this.act_forecast_show = false;
    },
    //listenChildMsg
    listenChildMsg: function (id) {
      let base_url = common.get_base_url();
      ///api/user / activity / getActivityById

      Indicator.open();
      this.$http.get(base_url+'/yizhiweimen/api/user/activity/accessDetails?enrollactiveId='+id,
        qs.stringify(
          {
            "enrollactiveId": id,
          })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          console.log("user_act_sssssss");
          console.log(e.data);
          this.poll_list = e.data;

          this.act_forecast_show = true;
        })
    },
    //评论提交
    commit_up_load: function (e) {
      let base_url = common.get_base_url();
      let user_Id = common.get_user_id();
      let rank_id = sessionStorage.getItem("rank_id");
      Indicator.open();
      let commit_p = this.$refs.commit_p.value
      if (commit_p == "") {
         Toast({
          message: '请输入评论内容',
          position: 'bottom',
          duration: 2000
        });
        return;
      }
      this.$http.post(base_url+'/yizhiweimen/api/user/activity/comment',
        qs.stringify(
          {
            "enrollactiveId": rank_id,
            "uid": user_Id,
            "content": commit_p
          })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          if (e.data == "") {
            Toast({
              message: "评论成功",
              position: 'bottom',
              duration: 2000
            });
            this.commit_show = false;
          }
        })
    },
    //显示评论框
    pinglunshow: function () {
      //this.commit_show = true;
      this.$store.dispatch("thom_redirect",
        {
          name: "/Letter_list_input_big", router: this.$router
        });
    },
    //评论关闭
    commit_show_fun: function () {
      console.log("show_commit_false");
      this.commit_show = false;
    },
    //add_btn
    add_btn: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/up_load_act", router: this.$router
        });
    },
    //goback
    goback: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/rank", router: this.$router
        });
    },
    //Letter_box
    Letter_box: function (id) {
      ///api/user / activity / getCommentEnrollactive
      sessionStorage.setItem("s_id",id)
      this.$store.dispatch("thom_redirect",
        {
          name: "/Letter_box_input", router: this.$router
        });
    },
    //baom_btn
    baom_btn: function () {
      let user_id = common.get_user_id();
      console.log("user_id")
      if (!user_id) {
        Toast({
          message:"请先登陆",
          position: 'bottom',
          duration: 2000
        });
        return
      }
      let rank_id = sessionStorage.getItem("rank_id");
      let base_url = common.get_base_url();
      Indicator.open();
      this.$http.post(base_url+'/yizhiweimen/api/user/activity/Enlist',
        qs.stringify(
          {
            "activity.id": rank_id,
            "enroller.id": user_id
          })
        )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: "网络错误",
            position: 'bottom',
            duration: 2000
          });
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          console.log(e.data);
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });

          if (e.data == "报名成功") {
            this.wrap_b_show = true;
          }

        })

    },
    //close_x
    close_x: function () {
      this.wrap_b_show = false;
    },
    //play_music
    play_music: function (url) {
      this.audio = url
      if (this.play_music_flag == false) {
        this.audio.pause();
        this.audio.play();
        this.play_music_flag = true;
      } else {
        this.audio.pause();
        this.play_music_flag = false
      }
    },
    dianzan_activity: function (id) {
      let user_Id = common.get_user_id();
      let base_url = common.get_base_url();
      ///api/user / activity / GiveTheThumbsUp
      this.$http.post(base_url+'/yizhiweimen/api/user/activity/GiveTheThumbsUp',
        qs.stringify(
          {
            "userId": user_Id,
            "loveId":id
          })
        )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
        }).then((e) => {
          Indicator.close();
          console.log(e.data);
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
        })
    }
  },
  components: {
    Header_other,
    scroll
  }
}
</script>
<style scoped>
  /*预测s*/
  .act_letter{
    width:6vw;
    height:4.2vw;
    position:absolute;
    right:12vw;
    top:50%;
    transform:translateY(-50%);
  }
  .act_close_btn {
    position: absolute;
    top: 30%;
    right: 3vw;
    color: #9f5c2f;
    font-size: 8vw;
    transform: translateY(-50%);
  }
  .act_bot_box {
    margin-left: 3vw;
    margin-top: 1.5vw;
  }
  .act_bot_num{
    font-size:4.5vw;
    color:#fff;

  }
  .act_name{
    font-size:4vw;
    color:#fff;
    margin-top:0.5vw;
  }
  .act_b {
    height: 12vw;
    width: 3.4vw;
    background-color: #fff;
    border: 2px solid #9f5c2f;
    border-radius: 4vw;
    margin: 0 auto;
  }
  .act_bot_w {
    font-size: 4.8vw;
    width: 5vw;
    margin-left: 3.4vw;
    margin-top: 2.8vw;
    color: #fff;
  }
  .acat_bottom {
    background-color: #e54d4c;
    height: 26vw;
    border-top: 1px solid #9f5c2f;
    margin-top: 2.1vw;
    border-radius: 0 0 3vw 3vw;
  }
  .mid_box {
    margin-top: 2.6vw;
  } .mid_box_line {
    width: 58vw;
    height: 5vw;
    line-height: 5vw;
    border: 2px solid #9f5c2f;
    border-radius: 4vw;
    margin-left: 8vw;
  }
  .act_main_img {
    width: 73vw;
    height: 80vw;
    border:2px solid #9f5c2f;
    overflow:hidden;
  }
  .act_header_img {
    position: absolute;
    left: 8vw;
    top: 50%;
    border-radius: 2vw;
    width: 9vw;
    height: 9vw;
    border: 1px solid #9f5c2f;
    transform: translateY(-50%);
  }
  .act_header {
    height: 12vw;
    line-height: 12vw;
    font-size: 5.3vw;
    text-align: center;
    color: #9f5c2f;
    background-color: #fff;
    border-radius: 4vw 4vw 0 0;
  }
  .act_forecast {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 1001;
  }
  .act_for_box{
    background-color:#fff;
    width:85.7vw;
    height:130.5vw;
    border-radius:4vw;
    border:2px solid #9f5c2f;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  /*预测e*/
  .candidates_box_wrapper {
    width: 100%;
  }
  /*评论s*/
  .commit_btn {
    width: 20vw;
    height: 10vw;
    border-radius: 4vw;
    background-color: #42cd0a;
    text-align: center;
    color: #fff;
    margin-left: 55vw;
    line-height: 10vw;
    margin-top: 1vw;
  }
  .commit_input {
    width: 80%;
    height: 50%;
    border: 3px solid #9f5c2f;
    padding: 5%;
    margin-top: 2vw;
    resize: none;
  }
  .commit_on_put {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
  }
  .commit_box{
    width:80vw;
    height:50vw;
    background-color:#fff;
    position:absolute;
    z-index:1001;
    top:30vw;
    left:50%;
    transform:translateX(-50%);
    border-radius:4vw;
  }
  /*评论e*/
  /*报名s*/
  .smile {
    position: absolute;
    top: 2.5vw;
    left: 5.3vw;
    width: 8.2vw;
  }
  .baom_bottom_s {
    font-size: 3.4vw;
    margin-top: 5vw;
  }
  .icon_img {
    width: 6.2vw;
    vertical-align: bottom;
    margin-left:1vw
  } .add_btn {
    width: 41.2vw;
    height: 8.5vw;
    margin: 4vw auto 0;
  }
  .add_img_btn_1_img {
    width: 6vw;
    height: 4.4vw;
    margin-left: 1vw;
    margin-top: 2.8vw;
  }

  .add_img_btn {
    width: 41vw;
    height: 8.4vw;
    line-height: 8.4vw;
    display: flex;
  }

  .add_img_w {
    font-size: 4.8vw;
  }

  .baom_bot_header {
    font-size: 3.4vw;
    line-height: 5vw;
    margin-bottom: 4.4vw;
    word-wrap: break-word;
    word-break: normal;
    width: 48vw;
    margin:  4.8vw auto 0;
  }

  .wrapper_baom {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    color: #bc5b14
  }

  .baom_mid_header {
    font-size: 3.4vw;
  }

  .baom_header {
    text-align: center;
    font-size: 4.8vw;
    color: #bc5b14;
    margin-top: 5.6vw;
    margin-bottom: 2.9vw;
    text-align: center;
  }

  .baom {
    width: 64.5vw;
    height: 100.2vw;
    background-color: #fff;
    border-radius: 2vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position:relative;
    z-index:200;
  }

  .close_baom {
    color:#bc5b14;
    font-size: 5vw;
    position: absolute;
    top: 2vw;
    right: 2.9vw;
  }

/*报名e*/
 /*write div s*/
  .write_div{
   height:21.6vw;
  }
 /*write div e*/
  /*bottom_btn_wrap s*/
  .bottom_btn_wrap  .bottom_now {
    background-color: #e54d4c;
    color: #fff;
  }
  .bottom_btn_wrap .bottom_btn_bm {
    color: #fff;
    background-color: #fea500;
  }
  .bottom_btn_wrap .bottom_btn_pinglun {
    color: #e85454
  }
  .bottom_base_btn {
    width: 20vw;
    border-radius: 1vw;
    height: 1.75rem;
    line-height: 1.75rem;
    border: 2px solid #9f5c2f;
    background-color: #fff;
  }
  .bottom_btn_share {
    text-align: center;
  }
  .bottom_btn_wrap {
    width: 88vw;
    display: flex;
    justify-content:space-around;
    position:fixed;
    bottom:0.6rem;
    font-size:0.7rem;
    left:50%;
    transform:translate(-50%);
  }
  .bottom_btn_share {
    color: #fea500;
  }
  /*bottom_btn_wrap e*/
  /*activity_container s*/
  .activity_container {
    width: 100%;
    background-color: #eeeeee;
    /*background-image: url(../../static/img/bg_all.png);*/
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bottom_btn_share{

  }
  /*activity_container e*/
  /*header s*/
  header {
    width:100%;
    z-index:1000;
    position: fixed;
    height: 44px;
    line-height: 44px;
    background-color: #9f5c2f;
    font-size: 18px;
    text-align: center;
    color: #fff;
    padding-top:5.3vw;
  }
  .img_header{
    position:absolute;
    top:66%;
    left:4.2vw;
    width:5.4vw;
    transform:translateY(-50%)
  }
  .my_match {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right:3.6vw;
    /*width:16.2vw;*/
    padding:1vw;
    height:17.5px;
    line-height:17.5px;
    font-size:13px;
    border-radius:2vw;
    border:1px solid #fff;
  }
  /*header e*/

  /*act_banner s*/
  .act_banner {
    width: 88vw;
    /*margin: 0.35rem auto;*/
    margin:0 auto;
    height: 9.55rem;
    border-radius: 2vw;
    border: 1px solid #9f5c2f;
    position :relative;
  }
  .act_banner img {
    width: 100%;
    height: 100%;
    border-radius: 2vw
  }
  .act_banner_bot{
    height:1rem;
    line-height:1rem;
    width:100%;
    display:flex;
    justify-content:space-between;
    font-size:0.65rem;
    color:#fff;
    background-color:rgba(0,0,0,0.4);
    position:absolute;
    bottom:0;
    border-radius: 0 0 2vw 2vw;

  }
  .act_banner_bot div:nth-child(1) {
    text-shadow: 2px 3px 2px #302f2f;
    margin-left: 5vw;
    z-index: 100;
    position: relative;
  }
  .act_banner_bot div:nth-child(2) {
    text-shadow: 2px 3px 2px #302f2f;
    margin-right: 5vw;
    z-index: 100;
    position: relative;
  }

  /*act_banner e*/
  /*candidates s*/
  .candidates {
    border-radius:2vw;
    width: 77vw;
    height: 6.25rem;
    border: 1px solid #9f5c2f;
    margin: 0.9rem auto 0;
    background-color:#fff;
    position:relative;
    padding-left:5vw;
    padding-right:5vw;
  }
  .candidates_title {
    width: 13vw;
    position: absolute;
    top: -0.5rem;
    left: 2vw;
    height: 0.87rem;
    line-height: 0.87rem;
    text-align: center;
    background-color: #fff;
    color: #9f5c2f;
    border-radius:1vw;
    font-size: 0.6rem;
    border: 1px solid #9f5c2f;
  }
  .candidates_box{
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-around;
    position:relative;
  }
  .sub_candidates_box_header_img {
    height: 3rem;
    width: 3rem;
    border: 1px solid #9f5c2f;
    border-radius: 2vw;
    display: block;
    margin-top: 0.6rem;
  }
  .candidates_box_poll {
    width:100%;
    display: flex;
    justify-content: space-around;
    font-size: 0.5rem;
    line-height: 1.5;
    color: #9f5c2f;
  }
  .toupiao {
    font-size: 0.675rem;
    height: 1.15rem;
    border-radius: 1vw;
    line-height: 1.15rem;
    border: 1px solid #9f5c2f;
    color: #9f5c2f;
    width: 100%;

  }
  .candidates_box_right{
    position:absolute;
    top:50%;
    right:-4vw;
    margin-top:-1rem;
    transform:rotate(180deg);
    width:3.6vw;
  }
  .candidates_box_left {
    position: absolute;
    top: 50%;
    left: -4vw;
    margin-top: -1rem;
    width: 3.6vw;
  }
  /*candidates e*/
  /* user_info s*/
  .user_info_bottom_write_box{
     height:2rem;
     width:100%;
  }
  .dianzan_activity {
    font-size: 0.6rem;
    color: #ffffff;
    padding-top: 0.6rem;
  }
  .rank_heart_img {
    width: 0.9rem;
    margin:0 auto;
    display:block;
    margin-bottom:0.1rem;
  }
  .user_info {
    margin: 0 auto;
    width: 95vw;
  }
  .user_info_music {
    height: 2.5rem;
    width: 100%;
    background-color: #e85454;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
  }
  .box_shadow {
    box-shadow: 2px 2px 6px 2px rgba(76, 74, 74, 0.42);
  }
  .user_info_img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

  }
  .user_info_user_name {
    height: 1.2rem;
    padding: 0.4rem 0.3rem 0.4rem 0.4rem;
    width: 1.4rem;
    font-size: 3vw;
    background-color: #fff;
    color: #9f5c2f;
    border-radius: 1.5vw;
    letter-spacing: 2px;
    margin-top: 0.3rem;
    font-weight: 500;
    margin-left: 2vw;
  }
  .play_music {
    width: 55vw;
    height: 1.7rem;
    background-image: url(../../static/img/music_on_bot.png);
    background-size:cover;
    margin-top:0.4em;
  }
  .user_info_line{
    width:0.5vw;
    background-color:#fff;
  }
  .more{
    width:9vw;
    display:block;
    margin-right:1vw;
    max-height:2rem;
  }
  /*user_info e*/
</style>
